---
comments: false
---


<!DOCTYPE html>
<html lang="en">
    
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
    <script src="../leancloud.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
    <link rel="stylesheet" href="../loading.css">
    <link rel="stylesheet" href="../leancloud.css">
	<style>
		html, body {
			margin: 0;
			padding: 0;
		}
		#container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
           margin-top: 20px;
        }
        .card img {
            border-radius: 10px;
            overflow: hidden;
            width: 100%; 
            height: 100%;
            object-fit: cover; 
            /* padding: 5px;  */
            display: block;
            transition: transform 0.5s;
            /* position: relative; */
            z-index: 1;
            
        }
        .card {
            border-radius: 5px;
            width: 20%; 
            height: 100px;
            padding: 5px;
            /* object-fit: cover;  */
            overflow: hidden;
            /* border-radius: 10px; */
            transition: transform 0.5s;
            /* position: relative; */
        }
        .text {
            /* width: 100%; 
            height: 100%; */
            position: absolute;
            z-index: 2;
            padding: 3px;
            padding-left: 5px;
            padding-right: 5px;
            border-radius: 3px;
            /* top: 50%; */
            background-color: var(--main-color);
            display: none;
            transition: transform 0.5s;
        }
        .name {
            font-size: 10px;
            color: lightgray;
        }
        .author {
            font-size: 10px;
            color: lightgray;
        }
        img:hover {
            transform: scale(1.1);
            cursor: pointer;
        }
        .card:hover .text {
            display: block;
        }

        .item1 {
      /* 或任何你想要的百分比 */
      margin-bottom: -20px;
      margin-right: 15px;
    }

    .item2 {
      flex-grow: 1;
      /* 这将占据剩余的所有空间 */
    }
    #containers {
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
    }
    #backButton {
      background-image: url('../images/back.png');
      width: 20px;
      height: 20px;
      background-size: cover;
      cursor: pointer;
      /* background-color: #666; */
    }

	</style>
</head>
<body>
    
    <!-- 加载动画 -->
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div id="backButton"></div>
	<div id="container" ></div>
    <!-- <figure></figure> -->

    <div id="buttonContainer">
        <div id="moreButton"></div>
    </div>
    
    
</body>
<script>

    var elements = document.querySelector('.post-title__text');
    elements.textContent = '今日字帖'
    var postTitle = document.querySelector('.post-title');
    postTitle.style.display = 'none';
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';
    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';
  
    var currentPage = 1;
    var pageSize = 15; // 每页显示的条目数
    initLeanCloud()
    requestZitie_today(currentPage,pageSize,'',handleData)

    var img = document.getElementById('moreButton');
    img.addEventListener('click', function() {
      currentPage++;
      requestZitie_today(currentPage,pageSize,'',handleData)
    });


    function handleData(data) {
    //   console.log('获取到的数据为：',data);
        
        data.forEach(function(object) {
            var loading = document.querySelector('.loading');
            loading.style.display = 'none'; // 隐藏loading动画
        });
        // var data = document.querySelector('.data');
        var loading = document.querySelector('.loading');
        loading.style.display = 'none'; // 隐藏loading动画
        // data.style.opacity = 0.8; // 显示数据
    }
    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
      window.history.back()
    });
</script>
</html>